import React, { useEffect, useState } from 'react'
import { getDepartmentByHoscode, getScheduleRule, getFindScheduleList } from '@/api/hosp';
import { useParams } from "react-router-dom";
import { Table, TreeSelect, Card } from "antd";
const { TreeNode } = TreeSelect;
type TTreeNode = typeof TreeNode;

const Index = () => {
  // 接收param参数
  const { hoscode } = useParams()

  // 当前页面
  const [pageInfo, setPageInfo] = useState({
    current: 1,
    total: 1,
    pageSize: 5
  })

  // 科室编号
  const [depCode, setDepCode] = useState("");
  // 定义科室列表
  const [departmentList, setDepartmentList] = useState([])
  // 存储排班列表   useState 必须指定any <any[]>  
  const [bookingScheduleList, setBookingScheduleList] = useState<any[]>([]);

  const [keys, setKeys] = useState("-1");

  // 排班列表
  // 请求 
  useEffect(() => {
    getDepartmentByHoscode(hoscode as string).then(value => {
      console.log(value);
      setDepartmentList(value.data)
    })
  }, [])

  // 封装渲染科室
  const getScheduleRuleAsync = (current: number, pageSize: number, depcode: string) => {
    getScheduleRule(current, pageSize, hoscode as string, depcode).then(value => {
      console.log(value);
      // 改变两个状态
      setBookingScheduleList(value.data.bookingScheduleList.map((v: any) => {
        v.scheduleList = []
        return v
      }));
      setPageInfo({
        current,
        pageSize,
        total: value.data.total
      })
    })
  }
  return (
    <div>
      <TreeSelect
        showSearch
        style={{ width: '100%' }}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="请选择医院科室"
        allowClear
        // filterTreeNode  是否根据输入项进行筛选 
        filterTreeNode={(inputValue: string, treeNode: any) => {
          return treeNode.title.includes(inputValue);
        }}
        onChange={(code) => {
          console.log(code);
          getScheduleRuleAsync(1, 5, code);
        }}
      >
        {
          // 遍历数组 渲染页面
          departmentList.map((item: any) => (
            <TreeNode
              key={item.depcode}
              value={item.depcode}
              title={item.depname}
            >
              {/* 子元素渲染 */}
              {
                item.children.map((item: any) => (
                  <TreeNode key={item.depcode} value={item.depcode} title={item.depname} />
                ))
              }
            </TreeNode>
          ))
        }
      </TreeSelect>
      <Table
        rowKey={"workDate"}
        pagination={{
          ...pageInfo,
          onChange(current, pageSize) {
            getScheduleRuleAsync(current, pageSize, depCode);
          }
        }}
        bordered={true}
        // expandable 配置展开属性
        expandable={{
          // 点击展开图标时触发 两个参数 expanded, record
          onExpand(expended, record: any) {
            if (expended) {
              setKeys(record.workDate)
              getFindScheduleList(hoscode as string, depCode, record.workDate).then(value => {
                console.log(value);
                setBookingScheduleList(bookingScheduleList.map((item: any) => {
                  if (item.workDate === record.workDate) {
                    item.scheduleList = value.data
                  }
                  return item
                }))
              })
            } else {
              setKeys('-1')
            }
          },
          expandedRowKeys: [keys],
          expandedRowRender(record) {
            return (
              <Card>
                <Table
                  rowKey={"id"}
                  pagination={false}
                  bordered={true}
                  columns={[
                    {
                      title: "序号",
                      align: "center",
                      render(value, rows, index) {
                        return index + 1
                      }
                    },
                    {
                      title: "号源时间",
                      align: "center",
                      dataIndex: "workDate"
                    },
                    {
                      title: "预约总数",
                      align: "center",
                      dataIndex: "reservedNumber"
                    },
                    {
                      title: "剩余预约数",
                      align: "center",
                      dataIndex: "availableNumber"
                    },
                    {
                      title: "挂号费",
                      align: "center",
                      dataIndex: "amount"
                    },
                    {
                      title: "技能擅长",
                      align: "center",
                      dataIndex: "skill"
                    }
                  ]}
                  dataSource={record.scheduleList}
                />
              </Card>
            )
          }
        }}
        columns={[
          {
            title: "序号",
            align: "center",
            render(value, rows, index) {
              return (pageInfo.current - 1) * pageInfo.pageSize + index + 1;
            }
          }, {
            title: "医师数量",
            align: "center",
            dataIndex: "docCount"
          }
          , {
            title: "号源时间",
            align: "center",
            dataIndex: "workDate"
          }
          , {
            title: "预约总数",
            align: "center",
            dataIndex: "reservedNumber"
          }, {
            title: "剩余预约数",
            align: "center",
            dataIndex: "availableNumber"
          }
        ]}
        dataSource={bookingScheduleList}
      ></Table>
    </div>
  )
}

export default Index